<template>
  <div class="closeorder">
    <el-form :model="closeform" ref="closeform" @click.stop>
      <el-form-item label="设置自动确认订单:" :label-width="formLabelWidth">
        <el-switch
          v-model="closeform.isUp"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          inactive-text="关闭"
          @change="handleConfirmedorder"
        ></el-switch>
      </el-form-item>
      <div class="line"></div>
      <el-form-item label="设置关闭接单:" :label-width="formLabelWidth" prop="name">
        <el-switch
          v-model="closeform.isAutoReceive"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          inactive-text="关闭"
          @change="handleCloseorder"
        ></el-switch>
      </el-form-item>
      <el-form-item
        label="设置关闭接单时间:"
        :label-width="formLabelWidth"
        prop="name"
        v-if="closeform.isAutoReceive==true"
      >
        <div v-for="(ct, index) in closeform.closeTimes" :key="index">
          <el-date-picker
            size="small"
            v-model="closeform.closeTimes[index]"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="['00:00:00', '23:59:00']"
            :picker-options="option"
            value-format="yyyy-MM-dd HH:mm:00"
            format="yyyy-MM-dd HH:mm:00"
            :clearable="false"
            align="right"
          ></el-date-picker>
          <el-button style="margin-left: 10px;" type="danger" size="small" icon="el-icon-delete" @click="closeform.closeTimes.splice(index, 1)" circle></el-button>
        </div>
        <el-button type="success" size="small" icon="el-icon-plus" @click="closeform.closeTimes.push([])">添加</el-button>

      </el-form-item>
      <el-form-item class="bottom">
        <el-button type="primary" @click="onSubmit(closeform,'closeform')" size="small">确认</el-button>
        <el-button size="small" @click="handleCancelOrder('closeform')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getWarehouseConfig, updateWarehouseConfig } from "@/api/warehouse";
  export default {
    props: {
      closeId: {
        required: true,
        type: Number,
      },
    },
    watch: {
      closeId: {
        immediate: true, // 这句重要
        handler(val) {
          if (this.closeId) {
            this.closeIdval = val;
            this.getWarehouseConfigData(val);
          }
        },
      },
    },
    data() {
      return {
        closeIdval: "",
        ConfigData: "",
        formLabelWidth: "160px",
        times: [],
        closeform: {
          isUp: false,
          isAutoReceive: false,
          closeTimes: [],
        },
        option: {
          disabledDate:(time)=> {
            return time.getTime() < Date.now()-1 * 24 * 3600 * 1000
          }
        }
      };
    },
    mounted() {
      // this.getWarehouseConfigData(this.closeIdval);
    },
    methods: {
      getWarehouseConfigData(val) {
        getWarehouseConfig({ warehouseId: val }).then((res) => {
          this.closeform.isUp = res.data.data.isUp == 2 ? true : false;
          this.closeform.isAutoReceive =
            res.data.data.isAutoReceive == 1 ? true : false;
          var times = [];
          res.data.data.closeTimes.forEach(closeTime=>{
            times.push([closeTime.closeStartTime, closeTime.closeEndTime])
          });
          this.closeform.closeTimes = times;
        });
      },
      // 确认提交
      onSubmit(closeform, closeformName) {
        if (this.closeform.isAutoReceive == true) {
          if (this.closeform.closeTimes == "") {
            this.$message.error("设置关闭接单时间");
          } else {
            var times = [];
            this.closeform.closeTimes.forEach(closeTime=>{
              times.push({closeStartTime: closeTime[0], closeEndTime: closeTime[1]})
            });
            const configdata = {
              warehouseId: this.closeIdval,
              isUp: this.closeform.isUp == true ? 2 : 1,
              isAutoReceive: this.closeform.isAutoReceive == true ? 1 : 0,
              closeTimes: times
            };
            updateWarehouseConfig(configdata).then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: "处理成功",
                  type: "success",
                });
                this.$emit("closeorder");
              } else {
                this.$message({
                  message: "处理失败",
                  type: "warning",
                });
              }
            });
          }
        } else {
          const configdata = {
            warehouseId: this.closeIdval,
            isUp: this.closeform.isUp == true ? 2 : 1,
            isAutoReceive: this.closeform.isAutoReceive == true ? 1 : 0
          };
          updateWarehouseConfig(configdata).then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "处理成功",
                type: "success",
              });
              this.$emit("closeorder");
            } else {
              this.$message({
                message: "处理失败",
                type: "warning",
              });
            }
          });
        }
      },
      // 切换自动确认订单
      handleConfirmedorder(val) {
        if (val) {
          this.$confirm(
            "点击【确定】将会开启该仓库的自动确认订单功能",
            "确定开启吗",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.closeform.isUp = true;
            })
            .catch(() => {
              this.closeform.isUp = false;
            });
        } else {
          this.$confirm(
            "点击【确定】将会关闭该仓库的自动确认订单功能",
            "确定关闭吗",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.closeform.isUp = false;
            })
            .catch(() => {
              this.closeform.isUp = true;
            });
        }
      },
      handleCloseorder(val) {
        if (val) {
          this.$confirm("点击【确定】将会关闭该仓库的接单功能", "确定开启吗", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.closeform.isAutoReceive = true;
            })
            .catch(() => {
              this.closeform.isAutoReceive = false;
            });
        } else {
          this.$confirm("点击【确定】将会开启该仓库的接单功能", "确定关闭吗", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.closeform.isAutoReceive = false;
            })
            .catch(() => {
              this.closeform.isAutoReceive = true;
            });
        }
      },
      handleCancelOrder(formName) {
        this.getWarehouseConfigData(this.closeIdval);
        this.$refs[formName].resetFields();
        this.$emit("closeorder");
      },
    },
  };
</script>

<style lang="scss">
  .closeorder {
    .line {
      height: 1px;
      background: #ccc;
      margin-bottom: 30px;
    }
    .bottom {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
